@import '../../../../scss/mixin.scss';
$foot-height: 100px;

$type: screen;
$proto: max-width;
$value: 450px;
.warper {
    background: {
        image: url('/assets/img/register-backgroud.jpg');
        size: 100% 100%;
        repeat: no-repeat;
    }
    width: 100%;
    height: calc(100vh - 50px);
    min-height: 850px;

    .body {
        margin: {
            left: auto;
            right: auto;
        }
        width: 47%;
        // min-width: 450px;
        height: 60%;
        min-height: 330px;

        @include respond-to('xs') {
          // margin: {
          //   left: auto;
          //   right: auto;
          // }
          width: 80%;
          max-width: 450px;
          height: 100%;
        }

        .header {
            background-color: transparent; 
            height: 5em;
            width: 100%;
            // text-align: center;
        }

        .content {
            margin: {
                top: 30px;
            } 
            width: 100%;
            background-color: white; 
            display: inline-block;
           // height: calc(100% - 50px);
            height: 50em;
        }

       

        .content-left {
            width: 50%;
            background: {
              image: url('/assets/img/login-left.jpg');
              size: 100% 100%;
              repeat: no-repeat;
            }
            height: 100%;
            @include respond-to('xs') {
                display: none;
                width: 0%;
            }
        }

        .content-right {
            width: 50%;
            padding: {
              top: 30px;
              left: 20px;
              right: 20px;
            }
             @include respond-to('xs') {
                width: 100%;
            }
        }
        
    }


    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: $foot-height;
        text-align: center;
        background: {
            color: rgba(255,255,255,1);
            color: rgb(255,255,255);
        }
    }
}


  